import React from 'react';
import {connect} from 'dva';
import styles from './Subjectadd.css';
import {Form, Input, Card, Row, Col, Button} from 'antd';
import MainLayout from '../components/layouts/MainLayout';
import  {routerRedux} from  'dva/router';

const FormItem = Form.Item;

class SubjectAddForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const createVote = this.props.handleSubmit;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        createVote(values);
      }
    });
  };


  render() {
    const {getFieldDecorator} = this.props.form;

    return (
      <Form className={styles.normal} onSubmit={this.handleSubmit}>
        <FormItem label="标题">
          {getFieldDecorator('title', {
            rules: [
              {required: true, message: '标题必须填写'}
            ]
          })(
            <Input placeholder="选出你最满意的毕业论文~"/>
          )}
        </FormItem>

        <FormItem label="描述">
          {getFieldDecorator('description', {
            rules: [
              {required: true, message: '描述必须填写'}
            ]
          })(
            <Input type="textarea" placeholder="balabala 关于这个投票主题的描述"/>
          )}
        </FormItem>

        <FormItem>
          <Button type="primary" htmlType="submit">保存</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedSubjectAddForm = Form.create()(SubjectAddForm);

function Subjectadd({dispatch}) {
  function handleSubmit(query) {
    dispatch({
      type: 'subjects/create',
      payload: {
        title: query.title,
        description: query.description
      }
    });

    dispatch(routerRedux.push({
      pathname: 'subjects',
      query: {}
    }));
  }

  return (
    <MainLayout>
      <Row>
        <Col span={3}>

        </Col>
        <Col span={18}>
          <Card title="新增投票主题">
            <WrappedSubjectAddForm handleSubmit={handleSubmit} />
          </Card>
        </Col>
        <Col span={3}>

        </Col>
      </Row>
    </MainLayout>
  );
}

function mapStateToProps() {
  return {};
}

export default connect(mapStateToProps)(Subjectadd);
